<template>
	<div class="page bgc-ebf0f6">
		<mt-header title="竞价明细">
			<router-link to="" slot="left">
				<img class="back" :src="staticImgData.back" @click="$router.back(-1)" alt="">
			</router-link>
			<router-link to="/bid/bidRecord" slot="right">
				<mt-button>出价记录</mt-button>
			</router-link>
		</mt-header>
		<div class="box-con">
			<div :class="[detailDesti.status==='中标' ? 'state-bg1' : 'state-bg2','list-state']">{{detailDesti ? detailDesti.status : ''}}</div>
			<div class="clearfix">
				<div class="list-type">{{detailDesti ? detailDesti.inquirySheetNo : ''}}</div>
				<div class="list-address">
					<p>{{detailDesti ? detailDesti.originLocationCity : ''}}</p>
					<div class="img">
						<img class="car" :src="staticImgData.car" alt="">
						<img class="line" :src="staticImgData.line" alt="">
					</div>
					<p>{{detailDesti ? detailDesti.destLocationCity : ''}}</p>
				</div>
				<div class="list-con gap-bottom detail-qua">
					<div class="list-detail">
						<div class="list-text gap-numder detail-time">
							<p>商品车数量：</p>
							<div class="list-jump" @click="carList">{{detailDesti ? detailDesti.totalShipCount : ''}}(台)<img class="img-detail" :src="staticImgData.detail" alt=""></div>
						</div>
						<div class="list-text detail-time">
							<p>竞价时间：</p>
							<p>{{detailDesti ? detailDesti.competitionTime : ''}}</p>
						</div>
					</div>
				</div>
				<div class="list-con gap-bottom">
					<div class="list-detail">
						<p class="detail-remark"><span>备注：</span>{{detailDesti ? detailDesti.remarks : ''}}</p>
					</div>
				</div>
				<div class="list-con gap-bottom">
					<div class="list-mark">
						<p class="list-num">竞价结果</p>
					</div>
					<div class="list-detail">
						<div class="list-text gap-numder">
							<p>出价次数：</p>
							<p>{{bidedDetail ? bidedDetail.bidCount : ''}}次</p>
						</div>
						<div class="list-text gap-numder">
							<p>最终排名：</p>
							<p>{{bidedDetail ? bidedDetail.currentRanking : ''}}</p>
						</div>
						<div class="list-text">
							<p>最终出价：</p>
							<p>{{bidedDetail ? bidedDetail.bidPrice : ''}}</p>
						</div>
					</div>
				</div>
				<div class="list-con" v-show="detailDesti.status==='中标'">
					<div class="list-mark">
						<p class="list-num">装车计划</p>
					</div>
					<div class="list-detail">
						<div class="list-text gap-numder">
							<p>司机：</p>
							<p>{{loadCar ? loadCar.driverName : ''}}</p>
						</div>
						<div class="list-text gap-numder">
							<p>车牌号：</p>
							<p>{{loadCar ? loadCar.plateNo : ''}}</p>
						</div>
						<div class="list-text gap-numder">
							<p>司机电话：</p>
							<p>{{loadCar ? loadCar.driverPhone : ''}}</p>
						</div>
						<div class="list-text">
							<p>到场时间：</p>
							<p>{{loadCar ? expectArrivalTime : ''}}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<v-loading v-show="loadingShow"></v-loading>
	</div>
</template>

<script>
	import { Header, Toast } from 'mint-ui'
	import Loading from '@/components/common/loading/loading'
	import * as ThreeStorage from '@/utils/store/token.js'
	import * as BidApi from '@/api/bid'
	import * as filters from '@/filter'
	export default {
	  name: 'bided-detail',
	  data() {
	    return {
	      loadingShow: false,
	      staticImgData: {
	        bg: require('@/assets/image/v1/bid/bg@2x.png'),
	        back: require('@/assets/image/v1/bid/back@2x.png'),
	        car: require('@/assets/image/v1/bid/car@2x.png'),
	        line: require('@/assets/image/v1/bid/line@2x.png'),
	        detail: require('@/assets/image/v1/bid/detail@2x.png')
	      },
	      detailDesti: '', // 始发地、目的地data
	      detailDestiParam: {
	        condition: {
	          queryFlag: '',
	          bidPartyCode: ThreeStorage.getCarInfo().currentFleetId, // 车队ID
	          id: ThreeStorage.getDealListInfo().id// 询价单ID
	        }
	      },
	      bidedDetail: '', // 竞价结果data
	      bidedDetailParam: {
	        serviceProviderGid: ThreeStorage.getCarInfo().currentFleetId,
	        inquirySheetId: ThreeStorage.getDealListInfo().id,
	        priceDetailFlag: 'one'// 查询类型
	      },
	      loadCar: '', // 装车计划data
	      loadCarParam: {
	        inquiryId: ThreeStorage.getDealListInfo().id// 询价单id
	      }
	    }
	  },
	  components: {
	    Header,
	    'v-loading': Loading
	  },
	  created() {
	    // 获取始发地接口
	    this.getDetailDesti()
	    // 获取竞价结果接口
	    this.getDetail()
	  },
	  computed: {
	    expectArrivalTime: function() {
	      return filters.stampToTime(this.loadCar.expectArrivalTime)
	    }
	  },
	  methods: {
	    getDetailDesti() {
	      this.loadingShow = true
	      BidApi.getDealList(this.detailDestiParam).then(res => {
	        this.loadingShow = false
	        if (res.code === 0) {
	          this.detailDesti = res.data.records[0]
	          // 获取装车计划接口---中标才调用
	          this.detailDesti.status === '中标' && this.getCarPlan()
	        } else {
	          Toast({
	            message: res.message,
	            duration: 1500
	          })
	          this.loadingShow = false
	        }
	      }).catch(res => {
	        this.loadingShow = false
	        Toast({
	          message: res.message || '系统繁忙，请稍候再试',
	          duration: 1500
	        })
	      })
	    },
	    getDetail() {
	      this.loadingShow = true
	      BidApi.getDetailOrRecord(this.bidedDetailParam).then(res => {
	        console.log(res)
	        this.loadingShow = false
	        if (res.code === 0) {
	          this.bidedDetail = res.data[0]
	        } else {
	          Toast({
	            message: res.message,
	            duration: 1500
	          })
	          this.loadingShow = false
	        }
	      }).catch(res => {
	        this.loadingShow = false
	        Toast({
	          message: res.message || '系统繁忙，请稍候再试',
	          duration: 1500
	        })
	      })
	    },
	    getCarPlan() {
	      this.loadingShow = true
	      BidApi.getLoadCarPlan(this.loadCarParam).then(res => {
	        console.log(res)
	        this.loadingShow = false
	        if (res.code === 0) {
	          this.loadCar = res.data
	        } else {
	          Toast({
	            message: res.message,
	            duration: 1500
	          })
	          this.loadingShow = false
	        }
	      }).catch(res => {
	        this.loadingShow = false
	        Toast({
	          message: res.message || '系统繁忙，请稍候再试',
	          duration: 1500
	        })
	      })
	    },
	    carList() {
	      this.$router.push({ name: 'bid-carList' })
	    },
	    bidRecord() {
	      this.$router.push({ name: 'bid-record' })
	    }
	  }
	}
</script>

<style scoped>
	@import '../../styles/util.css';
	/* common */
	.page {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.box-con{
		width: 100%;
		height: 100%;
		background: url(../../assets/image/v1/bid/bg@2x.png) center center no-repeat;
		margin-top: 46px;
	}
	.list-state{
		width: 0.71rem;
		height: 0.3rem;
		text-align: center;
		line-height: 0.3rem;
		color: #fff;
		border-radius: 0 0 0.06rem 0.06rem;
		float: right;
		margin-right: 0.16rem;
	}
	.state-bg1{
		background: #24cabc;
	}
	.state-bg2{
		background: #ff6262;
	}
	.list-type{
		font-size: 0.17rem;
		text-align: left;
		padding-left: 0.16rem;
		color: #fff;
	}
	.list-address{
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0.24rem 0 0.21rem 0;
		font-size: 0.2rem;
		font-weight: bold;
		color: #fff;
	}
	.list-address img{
		width: .2rem;
		height: .3rem;
	}
	.list-con.detail-qua{
		background: #3c91fe;
	}
	.list-mark{
		height: 0.38rem;
		text-align: left;
		border-bottom: 1px solid #eaf0f5;
	}
	.list-num{
		line-height: 0.38rem;
		font-size: 0.16rem;
		color: #000000;
		font-weight: bold;
		padding-left: 0.16rem;
	}
	.list-detail{
		padding: 0.16rem;
	}
	.list-detail .detail-remark{
		text-align: left;
		color: #f9524a;
		font-size: 0.15rem;
		font-weight: bold;
	}
	.list-detail .detail-remark span{
		font-size: 0.16rem;
	}
	.list-text.detail-time{
		color: #d5e2ff;
	}
	.list-text{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 0.14rem;
		color: #3f3f3f;
	}
	.list-jump{
		display: flex;
		align-items: center;
	}
	.gap-numder{
		padding-bottom: 0.12rem;
	}
	.img-detail{
		width: .17rem;
		height: .17rem;
		padding-left: 0.15rem;
	}

</style>
